<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li {
            font: 22px/30px "simsun";
            cursor: pointer;
            margin: 5px;
        }
    </style>
    <script src="../jquery-1.11.1.js"></script>
    <script>
        /* 仿股票等表单显示数据，各行变色，外加高亮显示
        1）所有展示数据各行变色，颜色自定义。
        2）鼠标进入后高亮显示，移开后恢复。 */
        jQuery(document).ready(function ($) {
            $('ul li:even').css('background', 'lightgreen');
            $('ul li:odd').css('background', 'skyblue');
            $('ul li').hover(function () {
                $(this).css('background', 'red');
            }, function () {
                $('ul li:even').css('background', 'lightgreen');
                $('ul li:odd').css('background', 'skyblue');
            });
        });
    </script>
</head>

<body>
    <ul>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
    </ul>
</body>

</html>